<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
        margin:0;
        padding:0;
       }
       #box{
        height:300px;
        width:200px;
        background: #ccc;
       }
       img{
        height:300px;
        width:200px;
       }
       /* 隐藏src无值的裂图 */
       img[src=""]{
         display: none;
       }
    </style>
</head>
<body>
    <!-- 1.占位盒子，给图片占位 -->
    <div id="box">
        <img src="" data-src="./瀑布流/images/1.jpg"  alt="">
    </div>

    <script>
        //2.只要src有值，就会立即加载图片
        //3.满足想要条件的时候，才会取加载图片（给src添加值）
        //  先将值放到 data-src上，当满足条件的时候，将data-src的值取出来，给src

        var img=document.querySelector("img");

        //当页面所有内容都加载完毕后，最后执行
        window.onload=function(){
            //后添加的属性，只能用getAttribute...
            let dataSrc=img.getAttribute("data-src");//获取data-src
            img.src=dataSrc;//将data-src的值给 src
            img.removeAttribute("data-src");//使用完成后删除 data-src
        }
    </script>
</body>
</html>